import React from 'react';
import { useGame } from '../GameContext';
import { motion } from 'framer-motion';

const GameControls: React.FC = () => {
  const { state, startGame, pauseGame, restartGame } = useGame();
  const { gameActive, gameOver } = state;

  return (
    <div className="flex flex-wrap gap-4 justify-center">
      {!gameActive && !gameOver && (
        <motion.button
          className="game-button success"
          onClick={startGame}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          开始游戏
        </motion.button>
      )}

      {gameActive && (
        <motion.button
          className="game-button warning"
          onClick={pauseGame}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          暂停游戏
        </motion.button>
      )}

      {(gameActive || gameOver) && (
        <motion.button
          className="game-button danger"
          onClick={restartGame}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3 }}
        >
          重新开始
        </motion.button>
      )}

      {/* 游戏状态提示 */}
      <div className="ml-4 text-lg font-semibold">
        {gameActive ? (
          <motion.span 
            className="text-green-600"
            animate={{ scale: [1, 1.1, 1] }}
            transition={{ repeat: Infinity, duration: 2 }}
          >
            游戏进行中
          </motion.span>
        ) : gameOver ? (
          <span className="text-red-600">游戏结束</span>
        ) : (
          <span className="text-gray-600">准备开始</span>
        )}
      </div>
    </div>
  );
};

export default GameControls;